import React, { useEffect, useRef } from 'react';
import cn from 'classnames';
import BreadCrumb from '@/components/BreadCrumb';
import { Confirm, Message, Input, Button, Loading, Link, Progress, Form } from '@knownsec/react-component';

import i from '@/index.module.css';
import s from './style.module.css';
import { modifySysConfig, modifySysPing, modifySysMode } from '~/API/index';
import { getErrorMessage } from '@/common/constant';

export default function DnsConfig() {
  const [loading, setLoading] = React.useState(false);
  const [configData, setConfigData] = React.useState({
    ports: [],
    primary_dns: '',
    secondary_dns: '',
    system_mode: null,
  });
  const configForm = useRef();
  useEffect(() => {
    getConfigData();
  }, []);
  const getConfigData = () => {
    setLoading(true);
    modifySysConfig('GET').then((res) => {
      setLoading(false);
      if (res.status === 'success') {
        configForm.current.setFieldsValue({
          primary_dns: res.data.primary_dns,
          secondary_dns: res.data.secondary_dns,
        });
        setConfigData({ ...res.data });
      }
    });
  };
  const changeConfig = () => {
    Confirm({
      title: 'DNS配置',
      pro: true,
      className: s.w400,
      message: <div className={cn(i.tac, i.mb10, i.p20)}>您确定修改DNS配置吗？</div>,
      onconfirm: () => {
        configForm.current.validateFields().then((res) => {
          setLoading(true);
          modifySysConfig('POST', { tag: 'dns', ...res })
            .then((res) => {
              setLoading(false);
              if (res.status === 'success') {
                Message.show({
                  pro: true,
                  type: 'success',
                  message: res.message,
                  onclose: () => {
                    getConfigData();
                  },
                });
              }
            })
            .catch((err) => {
              setLoading(false);
              Message.show({
                type: 'error',
                message: getErrorMessage(err, 'data'),
                onclose: () => {
                  getConfigData();
                },
              });
            });
        });
      },
      oncancel: () => {
        Message.show({
          type: 'info',
          message: '已取消操作',
        });
      },
    });
  };
  return (
    <div className={i.mainContent}>
      <BreadCrumb
        arr={[
          { link: '', name: '网络配置' },
          { link: '', name: 'DNS配置', active: true },
        ]}
      />
      <div className={cn(s.content, i.p24, i.oa, i.h100p, i.mins)}>
        <div className={s.bgc}>
          <div className={cn(i.p24, i.pr)}>
            <p>DNS配置</p>
            <div className={i.pt20}>
              <Loading show={loading} />
              <Form
                initialValues={configData}
                ref={configForm}
                onValuesChange={(newItem) => {
                  const values = Object.keys(newItem).reduce((total, key) => {
                    total[key] = newItem[key].value;
                    return total;
                  }, {});
                  configForm.current.setFieldsValue(values);
                }}
              >
                <div>
                  <Form.Item
                    label="首选DNS"
                    name="primary_dns"
                    rules={[{ required: true, message: '此字段为必填字段' }]}
                  >
                    <Input pro className={i.w240} />
                  </Form.Item>
                  <div className={s.ml11}>
                    <Form.Item label="备选DNS" name="secondary_dns">
                      <Input pro className={cn(i.w240)} />
                    </Form.Item>
                  </div>
                </div>
                <div className={s.ml3}>
                  <Button type="primary" className={cn(i.mb30)} onClick={() => changeConfig()}>
                    确认
                  </Button>
                </div>
              </Form>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
